<!DOCTYPE html>
<html lang="en">
<head>
    <title>新品有戏后台管理</title>
    <link href="__CSS__/boot.css" rel="stylesheet">
    <link href="__STATIC__/layui/css/layui.css" rel="stylesheet">
    <script src="__JS__/jquery.js"></script>
    <script src="__JS__/layer/layer.js"></script>
    <script src="__STATIC__/layui/layui.js"></script>
    <style>
        tr td{
            text-align: center;
            vertical-align: middle!important;
        }
    </style>
</head>
<body>
{include file="base/header"}
<div style="width: 800px;margin: 0 auto;margin-top: 10px">
    <form action="" onsubmit="return false" id="order" name="myform">
        <input type="hidden" id="uploadimage" name="image" >
        {foreach $result as $val}
        <div class="{$val.shopid}">
            <input type="hidden" name="shopid[]" value="{$val.shopid}" />
            <input type="hidden" name="pid[]" value="{$val.id}" />
            <input type="hidden" name="bid[]" value="{$val.bid}" />
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:100px;">产品名称</label>
                <div class="layui-input-block">
                    <input type="text" name="pname[]" readonly required  lay-verify="required" value="{$val.pname}" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:100px;">单价(元)</label>
                <div class="layui-input-block">
                    <input type="text" name="price[]"  readonly required  lay-verify="required" value="{$val.purchaseprice}" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:100px;">数量(个)</label>
                <div class="layui-input-block">
                    <input type="text" id="{$val.shopid}" onchange="change(this,{$bid})" name="number[]" required  lay-verify="required" value="{$val.number}" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:100px;">操作</label>
                <div class="layui-input-block" style="float: right">
                    <button type="button" onclick="del({$val.shopid},{$bid})" class="btn btn-danger">删除</button>
                </div>
            </div>
            <hr style="background-color: blue;height: 5px"/>
        </div>

        {/foreach}
        {if !empty($result)}
        <div class="layui-form-item">
            <label class="layui-form-label" style="width:100px;">总价(元)</label>
            <div class="layui-input-block">
                <input type="text" readonly name="total" required  lay-verify="required" value="{$total}" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width:100px;">邮寄人</label>
            <div class="layui-input-block">
                <input type="text"  name="linkman" required  lay-verify="required"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width:100px;">电话</label>
            <div class="layui-input-block">
                <input type="text"  name="telephone" required  lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 100px">邮寄地址</label>
            <div class="layui-input-block" id="did">

            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label" style="width: 100px">详细地址</label>
            <div class="layui-input-block">
                <textarea name="address" id="address" placeholder="详细地址" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width:100px;">支付凭证</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="prove">
                    <i class="layui-icon">&#xe67c;</i>支付凭证
                </button>
            </div>
        </div>
        <div class="layui-form-item" style="display: none" id="images">
            <label class="layui-form-label" style="width:100px;">图片</label>
            <div class="layui-input-block">
                <img id="imgs" src="" width="100px" height="100px" />
            </div>
        </div>
        <div class="layui-form-item" style="width: 300px;margin: 0 auto">
            <div class="layui-input-block">
                <button type="button" id="insert" class="btn btn-primary">立即结算</button>
                <button type="button" onclick="reset()" class="btn btn-default">重置</button>
            </div>
        </div>
        {else /}
            <div style="width: 500px;margin: 0 auto;margin-top: 150px">
                <i class="layui-icon" style="font-size: 50px; color: gray;">没有需要处理的订单</i>
            </div>
        {/if}
    </form>
</div>
</body>
<script>
    //数量改变
    function change(th,bid) {
        var id = th.id;
        var number = $("#"+id).val();
        if(number <= 0){
            layer.alert('购买数量必须大于0');
            return;
        }
        $.ajax({
            url:"{:url('online/shopping/change')}",
            data:{
                'id':id,
                'number':number,
                'bid':bid
            },
            type:"post",
            dataType:"json",
            success:function (res) {
                if(res.total){
                    $("input[name=total]").val(res.total);
                }else if(res.error){
                    layer.alert(res.error);
                }
            }
        });
    }
    //支付凭证
    layui.use('upload', function(){
        var upload = layui.upload;
        upload.render({
            elem: '#prove' //绑定元素
            ,url: "{:url('online/shopping/prove')}" //上传接口
            ,field:'prove'
            ,done: function(res){
                if(res.prove){
                    $("#imgs").attr('src',"__ROOT__\\"+res.prove);
                    $("#images").css('display',"block");
                    $("#uploadimage").val(res.prove);
                }else if(res.error){
                    layer.alert(res.error);
                }
            }
        });
    });
    //默认1级
    $(function(){
        load(0);

    });
    //城市级联
    function load(id){
        $.ajax({
            url:"{:url('online/common/find')}",
            data:"id="+id,
            type:"get",
            dataType:"json",
            success:function(data){
                if(data == null || data.length == 0){
                    return ;
                }
                var info = "<select style='height: 30px' name='province[]'><option value=''>-请选择-</option>";
                for(var i=0;i<data.length;i++){
                    info+='<option value=\"'+data[i].id+'\">';
                    info+=data[i].name;
                    info+='</option>';
                }
                info += "</select>";
                $(info).appendTo("#did").change(function(){
                    $(this).nextAll("select").remove();
                    if($(this).val() != ""){
                        load($(this).val());
                    }
                });
            }
        });
    };
    //添加订单
    $("#insert").click(function () {
        var uploadimage = $("#uploadimage").val();
        //验证手机号
        var phone = /^[1][3,4,5,7,8][0-9]{9}$/;
        if(!$("input[name=linkman]").val()){
            layer.alert('请填写邮寄人');
            return;
        }else if(!$("input[name=telephone]").val()){
            layer.alert('请填写联系电话');
            return;
        }else if(!phone.test($("input[name=telephone]").val())){
            layer.alert('手机号格式不正确');
            return;
        }else if(!uploadimage){
            layer.alert('请添加支付凭证');
            return;
        }
        $.ajax({
            url:"{:url('online/shopping/insert')}",
            data:$("#order").serialize(),
            type:"post",
            dataType:"json",
            success:function (res) {
                if(res.success){
                    layer.alert(res.success,{bnt:['确定','取消']},function () {
                        window.location.reload();
                    },function () {
                        window.location.reload();
                    })
                }else if(res.error){
                    layer.alert(res.error);
                }
            }
        });
    });
    //重置
    function reset() {
        window.myform.reset();
    }
    //删除
    function del(id,bid) {
        $.ajax({
            url:"{:url('online/shopping/del')}",
            data:"id="+id+"&bid="+bid,
            type:"post",
            dataType:"json",
            success:function (res) {
                if(res.total){
                    $("."+id).remove();
                    $("input[name=total]").val(res.total);
                }else if(res.total == 0){
                    window.location.reload();
                }else if(res.error){
                    layer.alert(res.error);
                }
            }
        });
    }
</script>
</html>